<template>
  <smart-table
    :title="fileTitle"
    :formList="fileFormList"
    :selectUrl="fileSelectUrl"
    :insertUrl="fileInsertUrl"
    :deleteUrl="fileDeleteUrl"
    :updateUrl="fileInsertUrl"
    :exportExcelUrl="fileExportUrl"
    :importExcelUrl="fileImportUrl"
    :tableColumns="fileTableColumns"
    :formButtonCtl="fileFormButtonCtl"
    :formRules="fileFormRules"
    :getTableSelectIds="getTableSelectIds"
    :dialogLabelWidth="15"
    :maxOptionButtonCount="5"
    fileIndex="id">
    <template slot="header-form-button">
      <el-button type="warning" class="download-btn" :icon="zipLoading ? 'el-icon-loading' : 'el-icon-download'" @click="zipDownload(currentTableIds)"
        >批量打包下载</el-button
      >
    </template>
    <template slot="table-button" slot-scope="row">
      <el-button type="primary" icon="el-icon-view" @click="view(row.row)">预览</el-button>
    </template>
    <template slot="dialog-custom-form">
      <el-dialog title="文件预览" :visible.sync="viewDialogVisible" width="50%" @close="closeDialog" center @opened="initComponent">
        <meta-preview :metaData="fileObj" ref="metaPreview" />
        <span slot="footer" class="dialog-footer">
          <el-button type="primary" @click="closeDialog()">关闭</el-button>
        </span>
      </el-dialog>
    </template>
  </smart-table>
</template>

<script>
import { mapGetters } from 'vuex'
import MetaPreview from '@/components/MetaPreview'
import { downloadFile } from '@/utils/file'
export default {
  computed: {
    ...mapGetters(['token']),
  },
  components: {
    MetaPreview,
  },
  data() {
    return {
      //预览弹窗
      viewDialogVisible: false,
      //选中的ID
      currentTableIds: [],
      //文件打包下载加载中
      zipLoading: false,
      //当前文件
      currentFile: {},
      //主题
      fileTitle: '文件',
      //表单列表
      fileFormList: [
        {
          title: '文件名',
          name: 'fileName',
          type: 'input',
          hidden: {
            insertDialog: true,
            updateDialog: true,
          },
        },
        {
          title: '上传文件',
          name: 'id',
          type: 'file',
          hidden: {
            header: true,
            updateDialog: true,
          },
        },
        {
          title: '文件大小',
          name: 'fileSize',
          type: 'input',
          suffix: ' B',
          hidden: {
            header: true,
            insertDialog: true,
            updateDialog: true,
          },
        },
        {
          title: '文件类型',
          name: 'fileCategory',
          type: 'select',
          optionList: [],
          tagStyle: {},
          tipMap: {},
          filters: [],
          showValue: false,
          hidden: {
            insertDialog: true,
            updateDialog: true,
          },
        },
        {
          title: '文件后缀',
          name: 'fileSuffix',
          type: 'input',
          hidden: {
            header: true,
            insertDialog: true,
            updateDialog: true,
          },
        },
        {
          title: '备注',
          name: 'fileNote',
          type: 'input',
          hidden: {
            header: true,
          },
        },
      ],
      //文件查询路径
      fileSelectUrl: 'file/lookFile',
      //文件上传路径
      fileInsertUrl: 'file/addNote',
      //文件删除路径
      fileDeleteUrl: 'file/deleteFile',
      //文件导出路径
      fileExportUrl: '/fileService/file/export',
      //文件导入路径
      fileImportUrl: '/fileService/file/import',
      //表格列
      fileTableColumns: [
        {
          title: '文件名',
          name: 'fileName',
        },
        {
          title: '文件大小',
          name: 'fileSize',
          suffix: ' B',
        },
        {
          title: '文件类型',
          name: 'fileCategory',
          type: 'tag',
          tagStyle: {},
          tipMap: {},
          filters: [],
          showValue: false,
        },
        {
          title: '文件后缀',
          name: 'fileSuffix',
        },
        {
          title: '创建时间',
          name: 'createTime',
          width: 180,
        },
        {
          title: '修改时间',
          name: 'updateTime',
          width: 180,
        },
      ],
      //表单按钮控制
      fileFormButtonCtl: {
        detailButton: false,
      },
      //表单校验
      fileFormRules: {
        name: [
          {
            required: true,
            message: '文件名不得为空!',
            trigger: 'blur',
          },
        ],
      },
      //操作映射
      optionMap: {
        style: {
          0: 'primary',
          1: 'warning',
          2: 'warning',
          3: 'error',
          4: 'success',
          5: 'info',
        },
        tip: {
          0: '图片',
          1: '视频',
          2: '音频',
          3: '文本',
          4: '文档',
          5: '其他',
        },
        filters: [
          { title: '图片', name: '0' },
          { title: '视频', name: '1' },
          { title: '音频', name: '2' },
          { title: '文本', name: '3' },
          { title: '文档', name: '4' },
          { title: '其他', name: '5' },
        ],
      },
      //当前文件对象
      fileObj: {
        id: 0,
        //文件分类
        fileCategory: 0,
      },
    }
  },
  mounted() {
    this.addConfig()
  },
  methods: {
    //合并属性
    addConfig() {
      // 表单
      this.$set(this.fileFormList[3], 'filters', this.optionMap.filters)
      this.$set(this.fileFormList[3], 'tagStyle', this.optionMap.style)
      this.$set(this.fileFormList[3], 'tipMap', this.optionMap.tip)
      this.$set(this.fileFormList[3], 'optionList', this.optionMap.filters)
      // 表格
      this.$set(this.fileTableColumns[2], 'filters', this.optionMap.filters)
      this.$set(this.fileTableColumns[2], 'tagStyle', this.optionMap.style)
      this.$set(this.fileTableColumns[2], 'tipMap', this.optionMap.tip)
    },
    //压缩下载
    zipDownload(ids) {
      if (ids instanceof Array && ids.length < 1) {
        this.$message({
          type: 'warning',
          message: `请选择至少一项!`,
          showClose: true,
        })
        return
      }
      this.zipLoading = true
      this.$store.dispatch('file/zipDownload', ids).then((response) => {
        var zipId = response.data
        this.zipLoading = false
        const link = document.createElement('a')
        link.href = downloadFile(zipId)
        link.download = `${zipId}.zip`
        link.style.display = 'none'
        document.body.appendChild(link)
        link.click()
        document.body.removeChild(link)
      })
    },
    //初始化组件
    initComponent() {
      this.$refs.metaPreview.init()
    },
    //选中的表格ID集合
    getTableSelectIds(ids) {
      this.currentTableIds = ids
    },
    //预览
    view(data) {
      this.fileObj = data
      this.viewDialogVisible = true
    },
    // 离开页面销毁
    closeDialog() {
      this.$refs.metaPreview.pause()
      this.viewDialogVisible = false
    },
  },
}
</script>

<style lang="scss" scoped>
.download-btn {
  margin-left: 10px;
  float: right;
}
</style>
